<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE HTML>
<html>
<head>
    <title>浏览器定位</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <style type="text/css">
        body{
            margin:0;
            height:100%;
            width:100%;
            position:absolute;
        }
        #mapContainer{
            position: absolute;
            top:0;
            left: 0;
            right:0;
            bottom:0;
        }
        #tip{
            min-height:65px;
            background-color:#fff;
            padding-left:10px;
            padding-right:10px;
            position:absolute;
            font-size:12px;
            right:10px;
            bottom:20px;
            border-radius:3px;
            line-height:18px;
            border:1px solid #ccc;

        }

        #tip input[type='button']{
            margin-left: 10px;
            margin-right:10px;
            margin-top:10px;
            background-color: #0D9BF2;
            height:30px;
            text-align:center;
            line-height:30px;
            color:#fff;
            font-size:12px;
            border-radius:3px;
            outline: none;
            border:0;
            float:right;

        }
    </style>
</head>
<body>


<div id='mapContainer'></div>
<div id="tip">
    <div>
        <input type="button" value="持续监控位置" onclick="watchPosition()"/>
        <input type="button" value="获得当前位置" onclick="getCurrentPosition()"/>
    </div>
    <div style="color: #C0C0C0">不支持IE9以下版本</div>
    <div id="r_title"><b>定位结果:</b></div>
    <div id="result"></div>
</div>

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=e2fb4affacae5cb70f3ac9f3c69c8e46"></script>
<script type="text/javascript">
    var map, geolocation;
    //加载地图，调用浏览器定位服务
    map = new AMap.Map('mapContainer', {
        zoom: 10,
        resizeEnable: true,
    });
    AMap.plugin(['AMap.ToolBar','AMap.Scale','AMap.OverView'],
            function(){
                map.addControl(new AMap.ToolBar());

                map.addControl(new AMap.Scale());

                map.addControl(new AMap.OverView({isOpen:true}));
            });
    map.plugin('AMap.Geolocation', function () {
        geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,//是否使用高精度定位，默认:true
            timeout: 10000,          //超过10秒后停止定位，默认：无穷大
            maximumAge: 0,           //定位结果缓存0毫秒，默认：0
            convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
            showButton: true,        //显示定位按钮，默认：true
            buttonPosition: 'LB',    //定位按钮停靠位置，默认：'LB'，左下角
            buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
            showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
            panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
            zoomToAccuracy:true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
        });
        map.addControl(geolocation);
        AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
        AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
    });
    //获取当前位置信息
    function getCurrentPosition () {
        geolocation.getCurrentPosition();
    };
    //监控当前位置并获取当前位置信息
    function watchPosition () {
        geolocation.watchPosition();
    };
    //解析定位结果
    function onComplete (data) {
        alert(1);
        var str = '<div>定位成功</div>';
        str += '<div>经度：' + data.position.getLng() + '</div>';
        str += '<div>纬度：' + data.position.getLat() + '</div>';
        str += '<div>精度：' + data.accuracy + ' 米</div>';
        str += '<div>是否经过偏移：' + (data.isConverted ? '是' : '否') + '</div>';
        result.innerHTML = str;


    };
    //解析定位错误信息
    function onError (data) {
        var str = '<p>定位失败</p>';
        str += '<p>错误信息：'
        switch(data.info) {
            case 'PERMISSION_DENIED':
                str += '浏览器阻止了定位操作';
                break;
            case 'POSITION_UNAVAILBLE':
                str += '无法获得当前位置';
                break;
            case 'TIMEOUT':
                str += '定位超时';
                break;
            default:
                str += '未知错误';
                break;
        }
        str += '</p>';
        result.innerHTML = str;
    };
    //setTimeout("getCurrentPosition()",7000);

</script>

<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div id="showdivdetails"></div>
</body>
</html>